// components/tuBiao/charts/index.js
import * as echarts from '../../../ec-canvas/echarts.min';
Component({
  /**
   * 组件的属性列表
   * @param {xline} 'x'坐标
   * @param {yline} 显示图表数据
   */
  properties: {
    xline: {
      type: Array,
      value: []
    },
    yline: {
      type: Array,
      value: []
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      onInit: null
    },
  },
  // 生命周期
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      let _this = this
      const initChart = function (canvas, width, height, dpr) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr, // new
        });
        canvas.setChart(chart);
        var option = {
          legend: {
            z: -1,
          },
          grid:{
            left:'14%',
          },
          xAxis: {
            type: 'category',
            data:_this.data.xline
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: _this.data.yline,
              type: 'line',
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  fontSize: 10
                }
              }
            }
          ]
        };
        chart.setOption(option);
        chart.on('click',e=>{
          _this.triggerEvent('clickFn',e.name)
        })
        return chart;
      }
      this.setData({
        ['ec.onInit']: initChart
      })
    },
  },
})